<!-- 主页页面 -->
<template>
  <div class="container">
    <!-- 背景图 -->
    <div class="background"></div>
    <!-- 覆盖背景图的部分 -->
    <div class="overlay" v-if="show" :style="{ width: overlayWidth }">
      <!-- 主题标题 -->
      <div v-for="(theme, index) in themeList" :key="index" class="section">
        <!-- 中文标题 -->
        <span
          class="section-text"
          @click="goToPhotoAlbum(theme.id, theme.title, theme.englishTitle)"
        >
          {{ theme.title }}
        </span>
        <!-- 英文标题 -->
        <span
          class="section-english"
          @click="goToPhotoAlbum(theme.id, theme.title, theme.englishTitle)"
        >
          {{ theme.englishTitle }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { themeApi, backgroundApi } from "@/api/api";
import { startSakura } from "@/js/flower";

export default {
  name: "Welcome",
  data() {
    return {
      themeList: [],
      show: false,
    };
  },
  computed: {
    overlayWidth() {
      const baseWidth = 750; // 默认宽度
      const extraWidthPerItem = 100; // 每个额外项增加的宽度
      const maxLength = 5; // 长度 <= 5 时使用默认宽度

      // 计算应该使用的宽度
      const length = this.themeList.length;
      return length <= maxLength
        ? `${baseWidth}px`
        : `${baseWidth + (length - maxLength) * extraWidthPerItem}px`;
    },
  },
  methods: {
    goToPhotoAlbum(id, title, english) {
      // 使用 $router.push() 方法进行路由导航到 photoAlbum 页面
      this.$router.push({
        path: "/photoAlbum",
        // 传递的参数
        query: {
          id: id,
          title: title,
          english: english,
        },
      });
    },
    queryTheme() {
      themeApi.queryAll("index").then((resp) => {
        if (resp.data.code) {
          this.themeList = resp.data.data;
          this.show = true;
        } else {
          this.$message({
            type: "info",
            message: resp.data.errMsg,
          });
        }
      });
    },
    getBackground() {
      backgroundApi.findById().then((resp) => {
        if (resp.data.code) {
          var backgroundUrl = resp.data.data.url;
          // 找到要设置背景的元素
          var backgroundElement = document.querySelector(".background");
          // 应用背景图片
          backgroundElement.style.backgroundImage =
            "url('" + backgroundUrl + "')";
        } else {
          this.$message({
            type: "info",
            message: resp.data.errMsg,
          });
        }
      });
    },
  },
  mounted() {
    this.queryTheme();
    this.getBackground();
    localStorage.removeItem("scrollPosition");
    // 开启花瓣特效
    // startSakura();
  },
};
</script>

<style scoped>
.container {
  /* 设置div的高度为100vh，以铺满整个视口 */
  height: 100vh;
  /* 设置容器为相对定位，以便子元素的绝对定位 */
  position: relative;
}

.background {
  /* 使用相对路径引用本地图片 */
  /* background-image: url("/static/images/婚纱2.jpg"); */
  /* 设置背景大小为cover，以铺满整个div */
  background-size: cover;
  /* 设置背景位置为居中 */
  background-position: center;
  /* 设置背景覆盖整个容器 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overlay {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 60px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section {
  /* 设置区域样式 */
  flex: 1; /* 等分空间 */
  height: 100%; /* 高度与覆盖层一致 */
  display: flex;
  flex-direction: column; /* 垂直方向布局 */
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.section:not(:first-child) {
  margin-left: -20px; /* 调整区域之间的左侧间距 */
}

.section:not(:last-child) {
  margin-right: -20px; /* 调整区域之间的右侧间距 */
}

.section-text {
  /* 文字样式 */
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
.section-english {
  /* 英文文字样式 */
  margin: 0;
  font-size: 12px; /* 设置英文文字的字体大小 */
  cursor: pointer;
}

.section:hover {
  transform: scale(1.1); /* 鼠标滑过时放大一点 */
}
</style>
